<!DOCTYPE html>
<html lang="en" class="standard">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/demo.css"/>
    <link rel="stylesheet" href="css/new.css">
    <script type="text/javascript" src="js/index.js"></script>
</head>

<body>
    <div id="wrap">
        <div id="header">
            <div class="inner">
                <div id="logo">
                    <img src="img/logo1.png" alt="logo图片" id="logoPic"/>
                    <ul id="logoUl1">
                        <li>首页</li>
                        <li>求职</li>
                        <li>扫码登录</li>
                        <li>道具兑换</li>
                    </ul>
                    <!--导航栏右侧部分-->
                    <div class="navRight">
                        <a href="#" class="icon1">
                            <p class="logoRight1">
                                <span class="icon-ios i"></span>
                                <span class="icon-ios1 i"></span>
                            </p>
                            iOS
                        </a>|
                        <a href="#" class="icon2">
                            <p class="logoRight2">
                                <span class="icon-and i"></span>
                                <span class="icon-and1 i"></span>
                            </p>
                            Android
                        </a>
                    </div>
               </div>
            </div>
        </div>
        <div id="main">
            <div id="view">
                <div class="banner">
                    <div id="bannerText">
                        <p>BOSS直聘APP，前所未有的找工作体验</p>
                        <span>BOSS在线开聊·行为数据匹配·名企高薪职位</span>
                    </div>
                    <input type="text" id="input1" placeholder="" style="outline:none"/>
                    <!-- 放大镜-->
                    <img src="img/search.gif" alt="放大镜" class="search"/>
                    </div>
                </div>
            <div id="main1">
                <ul id="mainUl">
                    <!--左侧部分-->
                    <li id="li1">
                        <!-- 默认显示的内容-->
                        <div id="li1Div1">
                            <!-- 存放精灵图-->
                            <p></p>
                            <span>注册boss直聘</span>
                        </div>
                        <!-- 滑动上来显示的内容-->
                        <div id="li1Div2">
                            <p>注册boss直聘</p>
                            <span>即可与百万boss立即开聊</span>
                            <p class="button">注册</p>
                        </div>
                    </li>
                    <li id="li2" class="li2Style">
                        <!-- 默认显示的内容-->
                        <div id="li2Div2">
                            <p>扫描登录网页版</p>
                            <span>老用户使用Boss直聘APP扫描二维码</span>
                            <p class="button">扫描登录</p>
                        </div>
                        <!-- 鼠标划开后的内容-->
                        <div id="li2Div1">
                            <!-- 存放精灵图-->
                            <p></p>
                            <span>扫描登录网页版</span>
                        </div>
                    </li>
                    <li id="li3">
                        <!-- 默认显示的内容-->
                        <div id="li3Div1">
                            <!-- 存放精灵图-->
                            <p></p>
                            <span>下载Boss直聘</span>
                        </div>
                        <!-- 滑动上来显示的内容-->
                        <div id="li3Div2">
                            <p>注册boss直聘</p>
                            <span>即可与百万boss立即开聊</span>
                            <p class="button">注册</p>
                        </div>
                    </li>
                </ul>
                <!-- 文字部分-->
                <div id="mainText">
                    <p>BOSS直聘</p>
                    <span>企业BOSS与职场牛人直接在线开聊</span>
                </div>
                <!-- 手机图片和中间的logo图标-->
                <div id="mainPic">
                    <img src="img/figure-line.png" alt="四条虚线" id="mainLine"/>
                    <img src="img/figure-phone-1.png" alt="手机图片" id="phone"/>
                    <img src="img/logo.png" alt="大图标" id="mainLogo"/>
                </div>
                <!-- 四个boss的图标-->
                <ul id="mainBossPic">
                    <li id="mainPic1"><img src="img/company-1.png" alt="公司logo1" id="img1"/></li>
                    <li id="mainPic2"><img src="img/company-2.png" alt="公司logo2" id="img2"/></li>
                    <li id="mainPic3"><img src="img/company-3.png" alt="公司logo3" id="img3"/></li>
                    <li id="mainPic4"><img src="img/company-4.png" alt="公司logo4" id="img4"/></li>
                </ul>
            </div>
            </div>
            <div class="direcruit">
                    <!-- 左边手机部分-->
                    <div id="main2Left">
                        <img src="img/figure-phone-2.png" alt="白色手机图片" id="whitePhone"/>
                        <div id="whitePhoneInner"></div>
                        <img src="img/chat-tip.png" alt="信息显示" id="chatTip"/>
                    </div>
                    <!-- 右侧的文字部分-->
                    <div id="main2Right">
                        <p>直聘/DIRECUIRT</p>
                        <span>在APP上跟未来BOSS直接开聊</span><br/>
                        <span>与冷冰冰的简历投递说再见</span>
                    </div>
            </div>
            <div class="company">
                <div id="main3Text">
                    <p>企业/BIG COMPANY</p>
                    <span>阿里百度腾讯，滴滴美团京东。都在用BOSS直聘招人</span>
                </div>
                <div id="main3Pic">
                    <img src="img/figure-computer.png" alt="电脑图片"/>
                </div>
                <!-- 六个小图标-->
                <img src="img/c-1.png" alt="百度图标" id="baidu"/>
                <img src="img/c-2.png" alt="美团图标" id="meituan"/>
                <img src="img/c-3.png" alt="腾讯图标" id="tengxun"/>
                <img src="img/c-4.png" alt="阿里图标" id="ali"/>
                <img src="img/c-5.png" alt="京东图标" id="jingdong"/>
                <img src="img/c-6.png" alt="滴滴图标" id="didi"/>
            </div>
            <div class="decent">
                <div id="main4Text">
                    <p>DECENT PAY/高薪</p>
                    <span>除了真人在线之外<br/>BOSS们认为最能表现诚意的是可观的薪资</span>
                </div>
                <!-- 右侧手机部分-->
                <div id="main4Phone">
                    <img src="img/figure-phone-3.png" alt="黑色手机图片"/>
                    <!-- 定义手机屏幕部分-->
                    <div id="main4BlackPhone">
                        <p id="black1"></p>
                        <p id="black2"></p>
                        <p id="black3"></p>
                    </div>
                    <!-- 放大的三张图片-->
                    <p id="black4"></p>
                    <p id="black5"></p>
                    <p id="black6"></p>
                </div>
            </div>
            <div class="other">
                <div class="inner">
                    <div id="main5Inner">
                        <!-- 横线-->
                        <hr class="mainLine"/>
                        <!-- 标题文字-->
                        <p>媒体报道</p>
                        <!-- 公司的logo图标-->
                        <ul id="main5Ul1">
                            <li><span id="main5Logo1"></span></li>
                            <li><span id="main5Logo2"></span></li>
                            <li><span id="main5Logo3"></span></li>
                            <li><span id="main5Logo4"></span></li>
                            <li><span id="main5Logo5"></span></li>
                            <li><span id="main5Logo6"></span></li>
                        </ul>
                        <ul id="main5Ul2">
                            <li><span id="main5Logo7"></span></li>
                            <li><span id="main5Logo8"></span></li>
                            <li><span id="main5Logo9"></span></li>
                            <li><span id="main5Logo10"></span></li>
                            <li><span id="main5Logo11"></span></li>
                            <li><span id="main5Logo12"></span></li>
                        </ul>
                    </div>
                </div>
            </div>
        <div class="mod-always ">
            <h3 class="title"></h3>

            <div class="scroll-wrap">
                <div class="bx-wrapper" style="max-width: 8250px; margin: 0px auto;">
                    <div class="bx-viewport"
                         style="width: 82%; overflow: hidden; position: relative; height: 88px;">
                        <ul class="company-list"
                            style="width: 1615%; position: relative; transition-duration: 0s; transform: translate3d(-980px, 0px, 0px);">
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-8.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-9.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-10.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-11.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-12.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-13.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-14.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-1.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-2.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-3.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-4.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-5.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-6.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-7.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-8.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-9.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-10.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-11.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-12.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-13.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;">
                                <img src="img/c-14.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-1.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-2.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-3.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-4.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-5.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-6.png" alt=""></li>
                            <li style="float: left; list-style: none; position: relative; width: 130px; margin-right: 10px;"
                                class="bx-clone"><img src="img/c-7.png" alt=""></li>
                        </ul>
                    </div>
                    <div class="bx-controls bx-has-controls-direction">
                        <div class="bx-controls-direction">
                            <a class="bx-prev" href="javascript:void(0);">&lt;</a>
                            <a class="bx-next" href="javascript:void(0);">&gt;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
        <div id="footer">
            <div class="footer_inner">
                <p class="copyright">Copyright © 2016 bosszhipin.com京ICP备14018958号-1</p>
                <p class="copyright">bosszhipin.com.保留所有版权. 使用这些服务遵守用户协议</p>
            </div>
        </div>
    </div>
</body>
</html>